<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            border: 1px solid black;

            position: relative;
        }

        .box>img {
            width: 200px;
            margin: 10px;

            /* 绝对定位以脱离文档流 */
            position: absolute;
        }




        .box2 {
            width: 500px;
            border: 1px solid black;
            padding: 10px;
        }

        .box2>img {
            width: 200px;
            margin-right: 10px;

            /* 浮动以脱离文档流 */
            /* 文字会自动让开浮动的元素 形成环绕效果 */
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./imgs/mbg1.jpg" alt="太极混元形意大师">

        <!-- 段落 -->
        <p>
            1、我一看！嗷！原来是昨天，有两个年轻人。
            2、多岁，一个体重，九十多公斤，一个体重八十多公斤。
            3、我说可以。我说你在健身房练死劲儿，不好用，他不服气。
            4、诶，我说小朋友，你两个手来折我一个手指头，他折不动。
            5、诶，朋友们好啊，我是混元形意太极门掌门人——马保国。
            6、他非要和我试试，我说可以。我一说完他啪就站起来了，很快啊。
            7、刚才有个朋友问我马老师发生什么事了，我说怎么回事，给我发了几张截图。
            8、这两个年轻人不讲武德，来骗！来偷袭，我六十九岁的老同志。这好吗？这不好！
            9、然后上来就是一个左正蹬，吭，一个右鞭腿一个左刺拳，我全部防区（口误）防出去了啊！
            10、他们说，诶，有一个说是我在健身房练功颈椎练坏了，马老师你能不能教教我浑元功法，诶，帮助治疗一下，我的颈椎病。
            11、我说我这个有用，这是化劲儿，传统功夫是讲化劲儿的，四两拨千金。二百多斤的英国大力士，都握不动我这一个手指头啊。
            12、我劝！这位年轻人好自为之，好好反思，以后不要再犯这样的聪明，小聪明，啊，呃，武林要以和为贵，要讲武德，不要搞窝里斗。
        </p>
    </div>

    <hr>


    <div class="box2">
        <img src="./imgs/mbg1.jpg" alt="太极混元形意大师">

        <!-- 段落 -->
        <p>
            1、我一看！嗷！原来是昨天，有两个年轻人。
            2、多岁，一个体重，九十多公斤，一个体重八十多公斤。
            3、我说可以。我说你在健身房练死劲儿，不好用，他不服气。
            4、诶，我说小朋友，你两个手来折我一个手指头，他折不动。
            5、诶，朋友们好啊，我是混元形意太极门掌门人——马保国。
            6、他非要和我试试，我说可以。我一说完他啪就站起来了，很快啊。
            7、刚才有个朋友问我马老师发生什么事了，我说怎么回事，给我发了几张截图。
            8、这两个年轻人不讲武德，来骗！来偷袭，我六十九岁的老同志。这好吗？这不好！
            9、然后上来就是一个左正蹬，吭，一个右鞭腿一个左刺拳，我全部防区（口误）防出去了啊！
            10、他们说，诶，有一个说是我在健身房练功颈椎练坏了，马老师你能不能教教我浑元功法，诶，帮助治疗一下，我的颈椎病。
            11、我说我这个有用，这是化劲儿，传统功夫是讲化劲儿的，四两拨千金。二百多斤的英国大力士，都握不动我这一个手指头啊。
            12、我劝！这位年轻人好自为之，好好反思，以后不要再犯这样的聪明，小聪明，啊，呃，武林要以和为贵，要讲武德，不要搞窝里斗。
        </p>
    </div>
</body>
</html>